<template>
  <div class="MyTimeLine">
    <u-time-line>
      <u-time-line-item
        v-for="(item, i) in list"
        :key="i"
        node-top="10"
      >
        <template #content>
          <view class="TimeLine-content">
            <view>
              <view class="u-order-title">审批人</view>
              <view class="u-order-time">{{ item.opinion || '待办' }}</view>
            </view>

            <view class="userAvatar">
              {{
                filterAssignInfo(item.assignInfo)
              }}
            </view>
          </view>
        </template>
      </u-time-line-item>
    </u-time-line>
  </div>
</template>

<script>
export default {
  name: 'TimeLine',

  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    filterAssignInfo(users) { // users: String | undefinded
      let showLabel = '';
      if (users) {
        const uArr = users.split(',');
        showLabel = uArr.map(u => {
          return u.match(/[\u4e00-\u9fa5]+/g);
        }).join(',');

        showLabel = showLabel.slice(0, showLabel.length - 1);
      }
      return showLabel;
    }
  }
};
</script>

<style lang="scss" scoped>
.MyTimeLine {
  /deep/ .u-dot {
    height: 10px;
    width: 10px;
  }
  .TimeLine-content {
    background-color: #fff;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #F8F8F8;
      bottom: -5px;
    }

    .u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 40rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
      color: rgb(200, 200, 200);
      font-size: 26rpx;
      margin-top: 5px;
    }

    .userAvatar {
      height: 100%;
      max-width: 60%;
    }
  }
}
</style>
